<template>
	<view class="">
		<view class="scroll_header"></view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"
		 refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
		    @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="mt-5 h_100" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
				<view class="d-flex flex-column j-center a-center h_100">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">暂无历史记录</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="my-2" v-for="(item,index) in service_list" :key="index">
					<view class="d-flex j-center mt-3">
						<text class="font-28 timer" v-if="new Date(item.time.substring(0,10)).getTime()==new Date(today).getTime()">{{'今天'+item.time.substring(11,16)}}</text>
						<text class="font-28 timer" v-else-if="new Date(item.time.substring(0,10)).getTime()==new Date(yesterday).getTime()">{{'昨天'+item.time.substring(11,16)}}</text>
						<text class="font-28 timer" v-else>{{item.time.substring(0,16)}}</text>
					</view>
					<view class="m-2 p-2 bg-white rounded-20 service_h" @click="detailTo(item)">
						<view class="d-flex j-sb a-center">
							<view class="font-weight" :class="item.read_status=='unread'?'text-000':'text-999'">{{item.title}}</view>
							<view class="identifying" v-if="item.read_status=='unread'"></view>
						</view>
						<view class="d-flex mt-1">
							<view class="mr-2" v-if="item.image">
								<image class="ser_img rounded-15" :src="item.image" mode=""></image>
							</view>
							<view class="" :class="item.read_status=='unread'?'text-000':'text-999'">
								{{item.description}}
							</view>
						</view>
					</view>	
				</view>
				<view class="pb-2" v-if="!service_list.length<=0">
					<view class="" v-if="service_list.length==total"  @click="loadmores">
						<u-loadmore status="nomore" icon-type="circle" />
					</view>
					<view class="" v-else >
						<u-loadmore status="loading" icon-type="circle" />
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default{
		data(){
			return {
				service_list:"",
				triggered: false, // 下拉刷新
				u_loadmore:true, // 加载中
				more:1, // 第几页
				count:10, // 条数
				total:0,// 总条数
				scrollHeight:0, // 屏幕高度
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				yesterday:"", // 昨天
				today:"", // 今天
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+'px';
					})
				}
			})
		},
		methods:{
			// 下拉刷新 自定义下拉刷新控件被下拉
			 onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			},
			// 加载数据
			getData(){
				this.$H.post("v2/store/notification",{
					type:"order_affirm_received",
					pagination:{
						count:this.count,
						page:this.more
					},  
				}).then(res=>{
					this.service_list=res.data
				})
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if(that.service_list.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			},
			// 滚动时触发
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},	
			// 回到顶部
			loadmores(){
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			detailTo(item){
				this.$H.post("v2/store/notification/read",{
					id:item.id
				}).then(res=>{
					uni.navigateTo({
						url:'/pagesA/order/order-today-send-detail?order_id='+item.data.order_id
					})
				})
			}
		},
		onShow() {
			this.$H.post("v2/store/notification",{
				type:"order_affirm_received",
				pagination:{
					count:this.count,
					page:this.more
				}, 
			}).then(res=>{
				this.service_list=res.data
				this.u_loadmore=false
				this.total=res.paginated.total	
			})
		},
		onLoad() {
			var date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate());
			var D1 = (date.getDate()-1 < 10 ? '0'+(date.getDate()-1) : date.getDate()-1);
			this.today=Y+M+D
			this.yesterday=Y+M+D1
		}
	}
</script>

<style>
	.timer{
		padding: 5upx 20upx;
		color: #FFFFFF;
		border-radius: 50upx;
		background-color: #dddddd;
	}
	.identifying{
		width: 15upx;
		height: 15upx;
		border-radius: 50%;
		background-color: #FF0000;
	}
	.service_h{
		height: 250upx;
	}
	.ser_img{
		width: 150upx;
		height: 150upx;
	}
</style>
